<script setup>
import addFenLei from '@/components/addFenLei.vue';
import { ref, watch } from 'vue'
import { useAddFenLeiString, useUpdateFenLeiString, useDelFenLeiString } from '@/api/fenLeiApi'
import useFenLeiPinia from '@/stores/models/useFenLeiPinia';
import xuanRanFenLeiString from '@/utils/xuanRanFenLeiString'

const fenLeiPinia = useFenLeiPinia()



// ---------------
// 打开编辑

// 分类弹是否出框
const isShowAddFenLei = ref(false)
// 拿到弹框Dom
const addFenLeiDom = ref(null)
// 接收isChildSubmit的值，用来判断是否点了登录
const isParentSubmit = ref(null)
// 加载
const loading = ref(false)
// 分类的盒子
const fenLeiBox = ref(fenLeiPinia.fenLeiString)

// ...................

// 刚进页面，渲染分类数据
  const fun = async () => {
    fenLeiBox.value = await xuanRanFenLeiString()
  }
  fun()


// .................

// 点击编辑后的操作
const bianJi = (id) => {
  loading.value = true
  // console.log('看看传入的ID是啥值',id)
  // 如果有id，说明是改值
  if (id){
    // 先让文本框显示
    isShowAddFenLei.value = true
    // 通过筛选出id那一组的数据
    const idString = fenLeiPinia.fenLeiString.find(item => item.id === id)
    // 分别把分类名称和分类别名提出来单独赋值变量
    const idCateName = ref(idString.cate_name)
    const idCateAlias = ref(idString.cate_alias)
    // 获取弹框dom里的input并赋值
    addFenLeiDom.value.cateName.value = idCateName.value
    addFenLeiDom.value.cateAlias.value = idCateAlias.value
    // 开启事件监听，看看有没有点确认
    const delWatch = watch(isParentSubmit, (newVal) => {
      if (newVal === true) {
        // 执行这里，代表点确认了，要改数据
        // 先服务器改
        const fun = async () => {
          loading.value = true
          fenLeiBox.value = await useUpdateFenLeiString(id,addFenLeiDom.value.cateName.value,addFenLeiDom.value.cateAlias.value)
          loading.value = false
        }
        fun()
        // 关闭弹框
        isShowAddFenLei.value = false
        isParentSubmit.value = false
        addFenLeiDom.value.cateName.value = ''
        addFenLeiDom.value.cateAlias.value = ''
        delWatch()
      }
    })
  } else{
    // 执行这里，就是添加分类
    // 先让文本框显示
    isShowAddFenLei.value = true
    // 看看点没点确认
    const delWatch = watch(isParentSubmit, (newVal) => {
      if (newVal === true) {
        // 执行这里，代表点确认了，要改数据
        // 先判断是否合法，名称1到10位，别名1到15位非法字符
        if ( 
          addFenLeiDom.value.cateName.value === '' ||
          addFenLeiDom.value.cateName.value.length > 10 ||
          addFenLeiDom.value.cateAlias.value === '' ||
          addFenLeiDom.value.cateAlias.value.length > 15 ||
          /[^a-zA-Z0-9]/.test(addFenLeiDom.value.cateAlias.value)
        ) {
          alert('输入文本不合规范')
        } else{
          // 服务器添加并渲染
          const fun = async () => {
            loading.value = true
            fenLeiBox.value = await useAddFenLeiString(addFenLeiDom.value.cateName.value,addFenLeiDom.value.cateAlias.value)
            .catch(err => {
              alert(err.data.message)
              loading.value = false
            })
            loading.value = false
          }
          fun()
        }
        // 初始化
        isShowAddFenLei.value = false
        isParentSubmit.value = false
        addFenLeiDom.value.cateName.value = ''
        addFenLeiDom.value.cateAlias.value = ''
        delWatch()
      }
    }) 

  }
  loading.value = false 
}
// -------------

// 关闭弹窗，接收isChildShowAddFenLei，判断是否点×了
const isParentShow = ref(null)
watch(isParentShow,(newVal)=>{
  if (newVal === true){
    isShowAddFenLei.value = false
    isParentShow.value = false
    addFenLeiDom.value.cateName.value = ''
    addFenLeiDom.value.cateAlias.value = ''
  }
})

// ----------

// 删除分类
const delAddFenLeiString = async (id) => {
  console.log('id',id)
  loading.value = true
  // 服务器更新
  fenLeiBox.value = await useDelFenLeiString(id)

  loading.value = false
  // 视图更新
  // fenLeiPinia.fenLeiString = fenLeiPinia.fenLeiString.filter(item => item.id !== id)
}



</script>

<template>
  <div class="maxBox"
    v-loading="loading"
    element-loading-text="拼命加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.7)"
  >
    <!-- 弹框 -->
    <addFenLei
      v-show="isShowAddFenLei"
      ref="addFenLeiDom"
      v-model:isSubmit="isParentSubmit"
      v-model:isShow="isParentShow"
    ></addFenLei>
    <div class="top">
      <div class="title">分类管理</div>
      <button class="btn myBtn" @click="bianJi(null)">添加分类</button>
    </div>
    <table class="table">
      <tr>
        <th>序号</th>
        <th>分类名称</th>
        <th>分类别名</th>
        <th>操作</th>
      </tr>
      <!-- 表格 -->
      <tr class="tr" v-for="(item, index) in fenLeiBox" :key="item.id">
        <td>{{ +index+1 }}</td>
        <td>{{ item.cate_name }}</td>
        <td>{{ item.cate_alias }}</td>
        <td class="useIcon">
          <span class="bianJi" @click="bianJi(item.id)">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-bianji">
              </use>
            </svg>
          </span>
          <span class="shanChu" @click="delAddFenLeiString(item.id)">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shanchu">
              </use>
            </svg>
          </span>
        </td>
      </tr>
    </table>
    <div class="noneText" v-show="!fenLeiBox.length">
      暂无内容
    </div>
  </div>
</template>

<style scoped>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .noneText{
  height: 100px;
  line-height: 100px;
  font-size: 40px;
  text-align: center;
  width: 980px;
  }
  .maxBox {
    width: 980px;
    height: 100vh;
    min-height: 600px;
  }
  /* top样式开始 */
  .top {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title {
    width: 200px;
    height: 100%;
    text-align: center;
    line-height: 80px;
    font-weight: 700;
    color: black;
    font-size: 40px;
  }
  .myBtn {
    cursor: pointer;
  }
  /* top样式结束 */
  /* table开始 */
  .table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 20px;
  /* height: 100vh; */
}

.table th,
.table td {
  padding: 12px 15px;
  border: none;
  border-bottom: 1px solid #4896b8;
  height: 100px;
}
.tr:hover {
  background-color: rgb(36, 121, 212,0.3);
}
.table th {
  border-bottom-color: #4896b8;
  font-weight: 600;
  font-size: 18px;
}
.table td {
  font-size: 16px;
}
.table tr:last-child td {
  border-bottom: none;
}
.shanChu,.bianJi  {
  font-size: 20px;
  line-height: 45px;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: block;
  cursor: pointer;
  border: 1px solid;
  margin: 1PX;
  transition: all 0.3s ease; /* 添加过渡动画 */
}
.shanChu:hover {
  background-color: rgb(255, 0, 0);
}
.bianJi:hover {
  background-color: rgb(36, 121, 212);
}
.useIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* border-bottom: 1px solid #eee; */
}
  /* table结束 */
</style>